<template>
  <div class="orderState">
    <!-- 头部图标 -->
    <div class="headerBox">
      <div class="header_left">
        <van-icon @click="back"
                  name="arrow-left" />
      </div>
      <div class="header_right">
        <van-icon name="bullhorn-o" />
      </div>
    </div>
    <div class="content">
      <!-- 订单状态 -->
      <!-- 【未付款】状态   -->
      <div class="top"
           v-if="state === '未付款'">
        <div class="state">未付款</div>
        <div class="stateDetail">
          <div class="iconWords">
            <van-icon name="passed" />
            <span>随时退</span>
            <van-icon name="passed" />
            <span>过期退</span>
            <van-icon name="passed" />
            <span>推荐自提</span>
          </div>
          <div class="desc">感谢您使用小默外卖的团购优惠功能~</div>
          <div class="btns">
            <button @click="ToCeateGroupBuy">克隆团购</button>
            <van-cell is-link
                      @click="showPopup">
              <button>关闭交易</button>
            </van-cell>
            <van-popup v-model="show"
                       round
                       position="bottom"
                       :style="{ height: '65%' }">
              <!-- 关闭交易弹窗 -->
              <div class="myCloseBox">
                <div class="title">关闭交易</div>
                <div class="close_des">关闭交易后无法恢复~</div>
                <!-- 单选原因 -->
                <div class="reason">请选择原因</div>
                <van-radio-group v-model="radio">
                  <van-cell-group>
                    <van-cell title="未及时付款"
                              clickable
                              @click="radio = '1'">
                      <template #right-icon>
                        <van-radio name="1" />
                      </template>
                    </van-cell>
                    <van-cell title="买家不想要了"
                              clickable
                              @click="radio = '2'">
                      <template #right-icon>
                        <van-radio name="2" />
                      </template>
                    </van-cell>
                    <van-cell title="恶意买家/同行捣乱"
                              clickable
                              @click="radio = '3'">
                      <template #right-icon>
                        <van-radio name="3" />
                      </template>
                    </van-cell>
                    <van-cell title="缺货"
                              clickable
                              @click="radio = '4'">
                      <template #right-icon>
                        <van-radio name="4" />
                      </template>
                    </van-cell>
                    <van-cell title="买家点错菜，点多了"
                              clickable
                              @click="radio = '5'">
                      <template #right-icon>
                        <van-radio name="5" />
                      </template>
                    </van-cell>
                    <van-cell title="其他"
                              clickable
                              @click="radio = '6'">
                      <template #right-icon>
                        <van-radio name="6" />
                      </template>
                    </van-cell>
                  </van-cell-group>
                </van-radio-group>
                <!--  确定关闭按钮 -->
                <button id="sureClose">确定关闭</button>
              </div>
            </van-popup>

          </div>
        </div>
      </div>
      <!-- 【交易关闭】状态   -->
      <div class="top"
           v-if="state === '交易关闭'">
        <div class="state">交易关闭</div>
        <div class="stateDetail">
          <div class="iconWords">
            <van-icon name="passed" />
            <span>随时退</span>
            <van-icon name="passed" />
            <span>过期退</span>
            <van-icon name="passed" />
            <span>推荐自提</span>
          </div>
        </div>
      </div>
      <!-- 【交易关闭】状态   -->
      <div class="top"
           v-if="state === '未使用/已使用/交易关闭'">
        <div class="state">未使用/已使用/交易关闭</div>
        <div class="stateDetail">
          <div class="iconWords">
            <van-icon name="passed" />
            <span>随时退</span>
            <van-icon name="passed" />
            <span>过期退</span>
            <van-icon name="passed" />
            <span>推荐自提</span>
          </div>
        </div>
      </div>

      <!-- 订单列表 -->
      <div class="orderList"
           v-if="state === '未付款'">
        <!-- 订单item    -->
        <div class="orderItem"
             v-for="item in orderList"
             :key="item.id">
          <!-- 图片，标题 动态渲染-->
          <div class="goodsInfo"
               v-for="item2 in item.goodsInfoList"
               :key="item2.num">
            <div class="pic_title">
              <div class="pic">
                <img :src='item2.src'
                     alt="">
              </div>
              <div class="title_num_price">
                <div class="title_num">
                  <div>烤鱼单人套餐</div>
                  <div>x1</div>
                </div>
                <!-- 价格 -->
                <div class="price">{{item.price}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="orderList"
           v-if="state === '交易关闭'">
        <!-- 订单item    -->
        <div class="orderItem"
             v-for="item in orderList"
             :key="item.id">
          <!-- 图片，标题 动态渲染-->
          <div>
            <div class="goodsInfoClose"
                 v-for="item2 in item.goodsInfoList"
                 :key="item2.num">
              <div class="goodsInfo">
                <div class="pic_title">
                  <div class="pic">
                    <img :src='item2.src'
                         alt="">
                  </div>
                  <div class="title_num_price">
                    <div class="title_num">
                      <div>烤鱼单人套餐</div>
                      <div>x1</div>
                    </div>
                    <!-- 价格 -->
                    <div class="price">{{item.price}}</div>
                  </div>
                </div>
              </div>
              <div class="cloneBtn">
                <button class="clone"
                        @click="ToCeateGroupBuy">克隆团购</button>
              </div>
            </div>

          </div>

        </div>
      </div>
      <div class="orderList"
           v-if="state === '未使用/已使用/交易关闭'">
        <!-- 订单item    -->
        <div class="orderItem"
             v-for="item in orderList"
             :key="item.id">
          <!-- 图片，标题 动态渲染-->
          <div>
            <div class="goodsInfoClose"
                 v-for="item2 in item.goodsInfoList"
                 :key="item2.num">
              <div class="goodsInfo">
                <div class="pic_title">
                  <div class="pic">
                    <img :src='item2.src'
                         alt="">
                  </div>
                  <div class="title_num_price">
                    <div class="title_num">
                      <div>烤鱼单人套餐</div>
                      <div>x1</div>
                    </div>
                    <!-- 价格 -->
                    <div class="price">{{item.price}}</div>
                  </div>
                </div>
              </div>
              <!-- 描述 -->
              <div class="desc">
                <span>未使用1份</span>
                <span>2022-10-30 23:59 前有效</span>
              </div>
              <!-- 按钮 -->
              <div class="cloneBtn">
                <button class="look"
                        @click="lookDetails">查看详情</button>

                <button class="clone"
                        @click="ToCeateGroupBuy">克隆团购</button>
              </div>
            </div>

          </div>

        </div>
      </div>
      <!-- 商品信息 -->
      <div class="info">
        <div class="infoTitle">商品信息</div>
        <div class="infoNum">
          <span class="greyColor">商品数量</span>
          <span>共3件</span>
        </div>
        <div class="infoPrice">
          <span class="greyColor">商品总价</span>
          <span>1888</span>
        </div>
        <div class="infoTotal">
          <span class="greyColor">订单总价</span>
          <span>1888</span>
        </div>
        <div class="pay">
          <span class="greyColor">应付款</span>
          <span>1888</span>
        </div>
        <div class="incoming">
          <span class="greyColor">本单预计收入</span>
          <span class="redColor">1818.02</span>
        </div>
      </div>
      <!-- 顾客信息 -->
      <div class="buyerInfo">
        <div class="buyer">
          <span>顾客信息</span>
          <span>
            <van-icon class="phone"
                      name="phone" />
          </span>
        </div>
        <div class="tel">
          <span class="greyColor">预留手机号</span>
          <span>+86123***7676</span>
        </div>
      </div>
      <!-- 订单信息 -->
      <div class="orderInfo">
        <div class="order">订单信息</div>
        <div class="orderNum">
          <div class="greyColor">订单编号</div>
          <div>
            <span>121212121212 | </span>
            <span class="blueColor"> 复制</span>
          </div>
        </div>
        <div v-if="state ==='未使用/已使用/交易关闭'"
             class="kuaiZhao">
          <div class="greyColor">交易快照</div>
          <div @click="kuaiZhao">
            <span>发生争议时，可作为判断依据</span>
            <span>
              <van-icon name="arrow" />
            </span>
          </div>
        </div>
        <div class="orderTime">
          <span class="greyColor">下单时间</span>
          <span>2022-09-22 19:30:53</span>
        </div>
        <div class="payTime"
             v-if="state ==='未使用/已使用/交易关闭'">
          <span class="greyColor">付款时间</span>
          <span>2022-09-22 19:30:53</span>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  data () {
    return {
      show: false,//关闭交易隐藏
      radio: 1,//关闭交易默认1
      state: '未使用/已使用/交易关闭',//展示'未付款'页面
      orderList: [
        {
          id: '1',
          price: '290',
          goodsInfoList: [
            {
              src: 'https://cdn3.axureshop.com/demo/1525603/images/%E5%9B%A2%E8%B4%AD%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85_%E6%9C%AA%E4%BB%98%E6%AC%BE/u4649.png',
              title: '烤肉两人套餐烤肉两人套餐烤肉两人套餐',
              goodsState: '',
              num: 'x1',
            },
            {
              src: 'https://cdn3.axureshop.com/demo/1525603/images/%E5%9B%A2%E8%B4%AD%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85_%E6%9C%AA%E4%BB%98%E6%AC%BE/u4649.png',
              title: '烤鱼单人套餐烤鱼单人套餐烤鱼单人套餐烤鱼单人套餐烤鱼单人套餐',
              goodsState: '退款中',
              num: 'x1',
            }
          ],

          tel: '+86134****1234',
          payMoney: '998',
          incoming: '966.9'
        }
      ]
    }
  },
  components: {
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    // 控制关闭交易的显示
    showPopup () {
      this.show = true;
    },
    // 点击克隆团购
    ToCeateGroupBuy () {
      this.$router.push('/CeateGroupBuy')
    },
    // 点击查看详情
    lookDetails () {
      this.$router.push('/lookDetailsView')
    },
    // 点击交易快照
    kuaiZhao () {
      this.$router.push('/kuaiZhaoView')
    }
  }
}
</script>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
}
.orderState {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  font-size: 14px;
  padding-bottom: 15px;
}
.state {
  font-size: 22px;
}
.headerBox {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  color: #fff;
}
.header_left,
.header_right {
  line-height: 35px;
  text-align: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #888787;
}
.header_right {
  margin-right: 10px;
}
::v-deep .van-icon-arrow-left:before {
  font-size: 20px;
}
.van-icon-bullhorn-o:before {
  content: "\e67c";
  font-size: 22px;
}
.content {
  margin: 15px;
}
.stateDetail {
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
  margin-top: 15px;
}
.iconWords span {
  margin-right: 15px;
}
.van-icon-passed:before {
  margin-right: 5px;
  color: pink;
  font-size: 16px;
}
.desc {
  height: 40px;
  line-height: 40px;
}
.btns {
  display: flex;
}
.btns button {
  width: 40%;
  height: 30px;
  border-radius: 5px;
  border: 1px solid #999;
  background-color: #fff;
  margin-right: 10px;
}
.btns .van-icon-arrow:before {
  content: "";
}
// 关闭交易弹窗样式
.myCloseBox {
  padding: 10px;
}
.title {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 16px;
}
.close_des {
  background-color: #efecec;
  font-size: 12px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
}
.reason {
  width: 100%;
  font-size: 14px;
  margin: 10px auto;
}
#sureClose {
  margin-top: 10px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #fff;
  background-color: #ff6e53;
  border-radius: 20px;
  border: none;
  font-size: 16px;
}
.myCloseBox .van-cell {
  height: 40px;
  line-height: 40px;
}
.orderList {
  margin-top: 15px;
}
.orderItem {
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 15px;
}
.goodsInfo {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pic_title {
  display: flex;
}
.pic img {
  width: 70px;
  height: 70px;
}
.title_num_price {
  margin-left: 10px;
  height: 70px;
  display: flex;
  justify-content: space-between;
  text-align: start;
}
.title_num {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.price {
  margin-left: 100px;
}
.info,
.buyerInfo,
.orderInfo {
  margin-top: 10px;
  border-radius: 10px;
  background-color: #fff;
  padding: 15px;
}
.infoTitle,
.buyer,
.order {
  font-size: 12px;
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid rgb(219, 218, 218);
}
.infoNum,
.tel {
  margin-top: 10px;
}
.infoNum,
.infoPrice,
.infoTotal,
.pay,
.incoming,
.tel,
.buyer,
.orderNum,
.orderTime,
.desc,
.kuaiZhao,
.payTime {
  display: flex;
  justify-content: space-between;
  height: 30px;
  line-height: 30px;
}
.infoNum span,
.infoPrice span,
.infoTotal span,
.pay span,
.incoming span,
.tel span,
.buyer span,
.orderTime span,
.desc span {
  display: inline-block;
}
.greyColor {
  color: #888787;
}
.redColor {
  color: #cc0000;
}
.blueColor {
  color: #0066cc;
}
.buyer .van-icon-phone:before {
  font-size: 16px;
  line-height: 20px;
  color: #888787;
}
.phone {
  text-align: center;
  width: 20px;
  height: 20px;
  border: #888787 1px solid;
  border-radius: 50%;
}
.cloneBtn {
  margin-top: 10px;
  height: 30px;
  margin-bottom: 10px;
}
.clone,
.look {
  width: 70px;
  font-size: 13px;
  padding: 5px;
  background-color: #fff;
  color: #727171;
  border: 1px solid #a8a7a7;
  border-radius: 15px;
  float: right;
  margin-right: 8px;
  font-size: 12px;
}
.look {
  color: red;
  border: 1px solid red;
}
.desc {
  font-size: 12px;
}
.desc span:first-child {
  color: #ff6e53;
}
</style>